<!--
 * @Author: xcl
 * @Date: 2022-04-20 18:05:17
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-27 15:11:02
 * @Description: Mock
-->
<template>
  <div class="mock">
    <div class="list box">
      <h3>生成列表数据</h3>
      <pre>{{ listStr }}</pre>
    </div>

    <div class="one box">
      <h3>生成单条数据</h3>
      <pre>{{ oneStr }}</pre>
    </div>
  </div>
</template>

<script>
var Mock = require("mockjs");
export default {
  name: "CesiumMock",
  components: {},
  data() {
    return {
      listStr: "",
      oneStr: "",
    };
  },
  props: {},
  watch: {},
  created() {},
  mounted() {
    // 输出结果
    var list = this.mockListData();
    this.listStr = JSON.stringify(list, null, 2);
    var one = this.mockOneData();
    // this.oneStr = Mock.toJSONSchema(one);
    this.oneStr = JSON.stringify(one, null, 2);
    console.log("生成列表数据", list);
    console.log("生成单条数据", one);
  },
  beforeDestroy() {},
  destroyed() {},
  methods: {
    /**
     * 生成列表数据
     * @param {Number} total 生成多少条数据；默认为:10
     * @param {Boolean} isPage true:分页数据；false:普通列表数据；默认为:true
     */
    mockListData(total = 10, isPage = true) {
      let self = this;
      var result;
      // 使用 Mock
      var item = self.returnMockItem(total);
      var mockOpt = new Object();
      mockOpt["rows|" + total] = [item];
      var data = Mock.mock(mockOpt);
      Mock.mock(/.json/, {
        //匹配.json文件
        "list|1-10": [
          {
            //数据模板，随机生成一个对象数组
            "id|+1": 1, //1开始，递增
            email: "@EMAIL",
            regexp3: /d{5,10}/,
          },
        ],
      });
      $.ajax({
        url: "hello.json", //请求访问json文件，拦截hello.json的请求，返回mock数据模板中的数据
        dataType: "json",
      }).done(function (data, status, jqXHR) {
        console.log(status, jqXHR, data);
      });
      data.total = total;
      if (isPage) {
        result = data;
      } else {
        result = data.rows;
      }
      return result;
    },

    /**
     * 生成单条数据
     * @param {Number} total 数据对象里面的name、code等属性需要批量生成多少条数据，默认是：1
     */
    mockOneData(total = 1) {
      let self = this;
      var result = self.mockListData(1, false);
      return result;
    },

    /**
     * 返回模拟的item
     * @param {Number} total 数据对象里面的name、code等属性需要批量生成多少条数据，默认是：1
     */
    returnMockItem(total = 1) {
      let self = this;
      var item = {
        "id|+1": 1,
        "name|+1": self.batchData("@cname()", total),
        "code|+1": self.batchData("@string()", total),
        sex: function () {
          return this.total % 2 === 0 ? 1 : 2;
        },
        "total|1-100": 100,
        "star|1-5": "★",
        "lng|20-38.6-8": 1,
        "lat|102-118.6-8": 1,
        "visible|1-2": true,
        "uid|+1": self.batchData("@guid()", total),
        "address|+1": self.batchData("@county(true)"),
        total,
        "ip|+1": self.batchData("@ip()", total),
        "email|+1": self.batchData("@email()", total),
        "title|+1": self.batchData("@ctitle()", total),
        "desc|+1": self.batchData("@cparagraph()", total),
        "createtime|+1": self.batchData(
          '@datetime("yyyy-MM-dd HH:mm:ss")',
          total
        ),
        "updatetime|+1": self.batchData("@now()", total),
        "age|18-60": 1,
        mobile: /^1[0-9]{10}$/,
        "status|1": ["意识强烈", "预报名", "意向一般", "暂无意向"],
        type: Mock.Random.integer(0, 1),
      };
      return item;
    },

    /**
     * 批量生成数据
     * @param {String} mockType 数据类型
     * @param {Number} num 批量生成多少条数据，默认：10
     */
    batchData(mockType, num = 10) {
      var result = [];
      for (let index = 0; index < num; index++) {
        const element = Mock.mock(mockType);
        result.push(element);
      }
      return result;
    },
  },
};
</script>

<style lang="less" scoped>
.mock {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;

  .box {
    width: calc(50% - 10px);
    height: 80%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    padding: 12px;
    h3 {
      font-size: 22px;
      font-weight: 600;
      width: 100%;
      line-height: 40px;
      height: 40px;
      text-align: center;
    }
    pre {
      width: calc(100% - 0px);
      height: calc(100% - 40px);
      overflow: auto;
      box-sizing: border-box;
      padding: 12px;
      background: #f1f1f1;
      margin: 0 auto;
    }
  }
}
</style>
